<template>
    <h1>我是一个组件</h1>

    <button @click="num++">num++ {{ num }}</button>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue";

const num = ref(100);

console.log("setup 内部直接书写代码, 类似于 以前生命周期的 创建前后");

onBeforeMount(() => {
    console.log("1. 组件开始挂载");
});
onMounted(() => {
    console.log("2. 组件挂载完毕");
});
onBeforeUpdate(() => {
    console.log('3. 数据更新前')
})
onUpdated(() => {
    console.log('4. 数据更新完毕')
})
onBeforeUnmount(() => {
    console.log('5. 组件准备开始卸载')
})
onUnmounted(() => {
    console.log('6. 组件卸载完毕')
})
</script>
